<script setup>
import { ref } from 'vue'
import dayjs from 'dayjs'
import { submitRateService, getOrderService } from '@/apis/center'
import { useUserStore } from '@/stores/user'
const UserStore = useUserStore()

// 控制loading加载的开关
const isLoading = ref(false)

// 控制评价对话框的开关
const dialogVisible = ref(false)

// 存储看房预约信息
const orderInfoList = ref([])

// 实现分页需要的参数
const pageSize = ref(5)
const page = ref(1)
const total = ref(null)

// 获取房源预约信息需要的参数
const orderItem = ref({
  id: UserStore.UserList.id,
  pageSize: pageSize.value,
  page: page.value
})

// 封装函数获取用户预约信息函数
const getOrderList = async () => {
  isLoading.value = true
  const res = await getOrderService(orderItem.value)
  total.value = res.data.data.count
  orderInfoList.value = res.data.data.rows
  isLoading.value = false
}

// 响应式引用，存储评分值
const rateValue = ref(0)

// 响应式引用，存储用户评价
const comment = ref(null)

// 响应式引用，存储用户评价房源的房源ID
const property_id = ref(null)

// 根据后台返回的预约信息状态选择相应的标签颜色
const getTagType = (status) => {
  switch (status) {
    case '待处理':
      return 'primary'
    case '同意':
      return 'success'
    case '拒绝':
      return 'danger'
    case '已完成':
      return 'info'
    default:
      return 'other'
  }
}

// 点击评价按钮打开对话框
const openDialog = (id) => {
  property_id.value = id
  dialogVisible.value = true
}

// 提交用户评价
const onSubmit = async () => {
  // 定义需要提交到数据库的用户评价信息对象
  const evaluateObj = {
    property_id: property_id.value,
    user_id: UserStore.UserList.id,
    rateValue: rateValue.value,
    comment: comment.value
  }
  await submitRateService(evaluateObj)
  ElMessage.success('评价成功！')
  dialogVisible.value = false
  rateValue.value = 0
  comment.value = ''
}

// 处理页码变化
const handleCurrentChange = (newPage) => {
  orderItem.value.page = newPage
  getOrderList()
}

// 处理页面显示数据条数变化
const handleSizeChange = (newSize) => {
  orderItem.value.pageSize = newSize
  getOrderList()
}

defineExpose({
  getOrderList
})
</script>

<template>
  <div>
    <h2>我的预约</h2>

    <!-- 用户预约列表 -->
    <el-table
      :data="orderInfoList"
      style="width: 100%"
      v-loading="isLoading"
      v-if="orderInfoList.length"
    >
      <el-table-column prop="date" type="index" label="序号" width="55" />
      <el-table-column prop="property.title" label="房源名称" />
      <el-table-column prop="property.address" label="房源地址" />
      <el-table-column label="房源价格">
        <template #default="scope">
          {{ Math.floor(scope.row.property.price) }}
        </template>
      </el-table-column>
      <el-table-column prop="user_name" label="预约人姓名" />
      <el-table-column prop="user_phone" label="联系电话" />
      <el-table-column prop="user_email" label="电子邮箱" />
      <el-table-column label="预约时间">
        <template #default="scope">
          {{ dayjs(scope.row.order_date).format('YYYY-MM-DD HH:mm:ss') }}
        </template>
      </el-table-column>
      <el-table-column prop="status" label="预约状态" width="200">
        <template #default="scope">
          <el-tag
            effect="dark"
            :type="getTagType(scope.row.status)"
            size="large"
          >
            {{ scope.row.status }}
          </el-tag>

          <span style="margin-left: 10px">
            <el-button
              type="warning"
              v-if="scope.row.status === '已完成'"
              @click="openDialog(scope.row.property.id)"
              >评价</el-button
            >
          </span>
        </template>
      </el-table-column>
    </el-table>

    <el-empty v-else :image-size="200" />

    <!-- 分页区域 -->
    <el-pagination
      background
      layout="jumper,total,sizes,prev,pager,next"
      :page-sizes="[2, 3, 5, 10]"
      style="margin-top: 40px; justify-content: flex-end"
      v-model:current-page="page"
      v-model:page-size="pageSize"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :total="total"
    ></el-pagination>

    <!-- 用户评价对话框 -->
    <el-dialog v-model="dialogVisible" style="border-radius: 10px">
      <template #title>
        <h1>用户评价表</h1>
      </template>

      <div class="rate">
        <div class="rate-top">
          <span class="demonstration">房源评分</span>
          <el-rate
            v-model="rateValue"
            size="large"
            @change="handleRateChange"
          />
        </div>

        <el-input
          type="textarea"
          maxlength="100"
          placeholder="请输入您的评价"
          show-word-limit
          style="width: 700px"
          rows="10"
          v-model="comment"
        ></el-input>
      </div>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="onSubmit">确认</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<style lang="scss" scoped>
.rate {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  width: 773px;
  height: 450px;
  margin: 20px;

  .rate-top {
    width: 700px;
    height: 250px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-top: 2px solid #f5f5f5;
    border-bottom: 2px solid #f5f5f5;
    margin-bottom: 20px;

    .demonstration {
      font-size: 30px;
      margin: 20px;
    }
  }
}
</style>
